<template>
    <div class="singer-song">
            <!-- 歌曲列表 -->
            <div class="list">
                <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
                <div v-for="(item,index) in list" :key="index">
                    <h4>{{ item.name }}</h4>
                    <div class="singer">
                        <span v-for="(singerItem,index) in item.singer" :key="index">{{ singerItem.name }}
                        <span v-show="index != item.singer.length -1">/</span>
                        </span>
                        <span class="dian">·</span>
                        <span v-show="item.album.name!=null">{{ item.album.name }}</span>
                    </div>
                </div>
            </van-list>
            </div>
        </div>
    </template>
    
    <script>
    export default{
        props:["singerId"],
        data(){
            return {
                list:[],
                loading: false,
                finished: false,
                page: 1
            }
        },
        created(){
            this.getData(this.singerId,10);
        },
        methods:{
            getData(id,num){
                this.$request("get","/singer/songs?singermid=" + id + "&page=" + this.page + "&num" + num)
                .then((res) =>{
                    console.log(res);
                    this.list = this.list.concat(res.data.list);
                    this.loading = false;
                    this.page++;
                    if(res.data.list.length == 0){
                        this.finished = true;
                    }
                });
            
            },
            onLoad(){
                setTimeout(() =>{
                    this.getData();
                    this.loading = true;
                },1000);
            }
        }
    }
    </script>
    <style scoped>
    .list{
        margin: 0 1rem;
    }
    .list h4{
        text-align: left;
        font-size: 1rem;
    }
    .singer{
        text-align: left;
    }
    .singer span{
        font-size: 0.8rem;
        color: rgb(160,160,190);
    }
    .dian{
        font-weight: 900;
        padding: 0 0.5rem;
    }
    </style>